<template>
  <div class="profile">
    <el-card class="profile-card">
      <el-form label-position="left" :model="infoForm" label-width="100px">
        <div v-if="!infoForm.headimgurl" class="headimg"></div>
        <el-avatar
          v-else
          shape="square"
          :size="200"
          fit="fill"
          :src="infoForm.headimgurl"
        ></el-avatar>
        <el-form-item label="姓名" prop="name">
          <el-input :disabled="disable" v-model="infoForm.name"></el-input>
        </el-form-item>

        <el-form-item label="项目地址" prop="productUrl">
          <el-input
            :disabled="disable"
            v-model="infoForm.productUrl"
          ></el-input>
        </el-form-item>

        <el-form-item label="班级" prop="class">
          <el-input :disabled="disable" v-model="infoForm.class"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input :disabled="disable" v-model="infoForm.age"></el-input>
        </el-form-item>

        <el-form-item label="城市" prop="city">
          <el-input :disabled="disable" v-model="infoForm.city"></el-input>
        </el-form-item>

        <el-form-item label="学历" prop="degree">
          <el-input :disabled="disable" v-model="infoForm.degree"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input
            :disabled="disable"
            v-model="infoForm.description"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoForm: {
        name: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        productUrl: "",
        description: "",
        headimgurl: "",
      },
      disable: true,
    };
  },
  mounted() {
    if (this.$route.params.id) {
      const info = JSON.parse(this.$save.takeOut("USERINFO") || "{}");
      Object.assign(this.infoForm, info);
    } else {
      this.$save.remove("USERINFO");
    }
  },
};
</script>

<style scoped>
.profile {
}
.profile-card {
  width: 500px;
  margin: 20px auto 0;
}
.headimg {
  width: 100px;
  height: 100px;
  margin: 15px auto;
  background-color: #ccc;
  border-radius: 15px;
}
>>> .el-input.is-disabled .el-input__inner {
  color: grey;
}
</style>
